﻿.fui-Input,
.fui-Textarea {
    align-items: center;
    border-bottom-left-radius: var(--borderRadiusMedium);
    border-bottom-right-radius: var(--borderRadiusMedium);
    border-bottom-style: solid;
    border-bottom-width: var(--strokeWidthThin);
    border-left-style: solid;
    border-left-width: var(--strokeWidthThin);
    border-radius: var(--borderRadiusMedium);
    border-right-style: solid;
    border-right-width: var(--strokeWidthThin);
    border-top-left-radius: var(--borderRadiusMedium);
    border-top-right-radius: var(--borderRadiusMedium);
    border-top-style: solid;
    border-top-width: var(--strokeWidthThin);
    box-sizing: border-box;
    color: var(--colorNeutralForeground1);
    display: inline-flex;
    position: relative;
    text-align: left;
    width: 100%;
    max-width: 100%;

    &.disabled {
        cursor: not-allowed;
        border-bottom-color: var(--colorNeutralStrokeDisabled);
        border-left-color: var(--colorNeutralStrokeDisabled);
        border-right-color: var(--colorNeutralStrokeDisabled);
        border-top-color: var(--colorNeutralStrokeDisabled);
        background-color: var(--colorTransparentBackground);
    }

    &:after {
        box-sizing: border-box;
        content: "";
        position: absolute;
        left: -1px;
        bottom: -1px;
        right: -1px;
        height: max(2px, var(--borderRadiusMedium));
        border-bottom-left-radius: var(--borderRadiusMedium);
        border-bottom-right-radius: var(--borderRadiusMedium);
        border-bottom: 2px solid var(--colorCompoundBrandStroke);
        clip-path: inset(calc(100% - 2px) 0px 0px);
        transform: scaleX(0);
        transition-property: transform;
        transition-duration: var(--durationUltraFast);
        transition-delay: var(--curveAccelerateMid);
    }

    &:focus-within::after {
        transform: scaleX(1);
        transition-property: transform;
        transition-duration: var(--durationNormal);
        transition-delay: var(--curveDecelerateMid);
    }
}

.fui-Input {
    flex-wrap: nowrap;
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightRegular);
    gap: var(--spacingHorizontalXXS);
    line-height: var(--lineHeightBase300);
    min-height: 32px;
    padding: 0 var(--spacingHorizontalMNudge);

    &:not(.disabled) {
        border-bottom-color: var(--colorNeutralStrokeAccessible);
        border-left-color: var(--colorNeutralStroke1);
        border-right-color: var(--colorNeutralStroke1);
        border-top-color: var(--colorNeutralStroke1);
        background-color: var(--colorNeutralBackground1);

        &:hover {
            border-bottom-color: var(--colorNeutralStrokeAccessibleHover);
            border-left-color: var(--colorNeutralStroke1Hover);
            border-right-color: var(--colorNeutralStroke1Hover);
            border-top-color: var(--colorNeutralStroke1Hover);
        }

        &:active,
        &:focus,
        &:focus-within {
            border-bottom-color: var(--colorNeutralStrokeAccessiblePressed);
            border-left-color: var(--colorNeutralStroke1Pressed);
            border-right-color: var(--colorNeutralStroke1Pressed);
            border-top-color: var(--colorNeutralStroke1Pressed);
        }

        &:focus-within {
            outline: transparent solid 2px;
        }

        &.fui-Input-plaintext {
            border-left-color: var(--colorTransparentStroke);
            border-right-color: var(--colorTransparentStroke);
            border-top-color: var(--colorTransparentStroke);
            border-bottom-color: var(--colorTransparentStroke);
        }
    }

    .fui-Input__input,
    .fui-Input__input-plaintext {
        background-color: transparent;
        border-bottom-style: none;
        border-left-style: none;
        border-right-style: none;
        border-top-style: none;
        box-sizing: border-box;
        color: var(--colorNeutralForeground1);
        flex-grow: 1;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        min-width: 0px;
        outline-style: none;
        padding: 0 var(--spacingHorizontalXXS);

        &:not(:disabled ) {
            background-color: transparent;
        }

        &:disabled {
            cursor: not-allowed;
            color: var(--colorNeutralForegroundDisabled);
            background-color: var(--colorTransparentBackground);
        }

        &[type="date"],
        &[type="datetime-local"] {
            &::-webkit-inner-spin-button,
            &::-webkit-calendar-picker-indicator {
                color: var(--colorNeutralForeground3);
                background-image: url("data:image/svg+xml,%3Csvg fill='currentColor' aria-hidden='true' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
                font-size: 20px;
                display: inline;
                line-height: 0;
                cursor: pointer;
            }
        }

        &.fui-Input__input-xs {
            &[type="date"],
            &[type="datetime-local"],
            &[type="time"] {
                &::-webkit-inner-spin-button,
                &::-webkit-calendar-picker-indicator {
                    font-size: 10px;
                }
            }
        }

        &.fui-Input__input-sm {
            &[type="date"],
            &[type="datetime-local"],
            &[type="time"] {
                &::-webkit-inner-spin-button,
                &::-webkit-calendar-picker-indicator {
                    font-size: 16px;
                }
            }
        }

        &.fui-Input__input-md {
            &[type="date"],
            &[type="datetime-local"],
            &[type="time"] {
                &::-webkit-inner-spin-button,
                &::-webkit-calendar-picker-indicator {
                    font-size: 22px;
                }
            }
        }

        &.fui-Input__input-lg {
            &[type="date"],
            &[type="datetime-local"],
            &[type="time"] {
                &::-webkit-inner-spin-button,
                &::-webkit-calendar-picker-indicator {
                    font-size: 24px;
                }
            }
        }

        &.fui-Input__input-xl {
            &[type="date"],
            &[type="datetime-local"],
            &[type="time"] {
                &::-webkit-inner-spin-button,
                &::-webkit-calendar-picker-indicator {
                    font-size: 28px;
                }
            }
        }

        &[type="time"] {
            &::-webkit-inner-spin-button,
            &::-webkit-calendar-picker-indicator {
                color: var(--colorNeutralForeground3);
                background-image: url("data:image/svg+xml,%3Csvg fill='currentColor' aria-hidden='true' width='1em' height='1em' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
                font-size: 20px;
                display: inline;
                line-height: 0;
                cursor: pointer;
            }
        }

        + .fui-Input__contentAfter {
            box-sizing: border-box;
            color: var(--colorNeutralForeground3);
            display: flex;
            cursor: pointer;

            .fui-Input__contentAfter-icon {
                font-size: 20px;
                display: inline;
                line-height: 0;
                color: var(--colorNeutralForeground3);
                cursor: pointer;
            }
        }

        &[type="color"] {
            display: inline;
            line-height: 0;
            cursor: pointer;
            margin: 0;
        }

        &.fui-Input__input-xs,
        &.fui-Input__input-sm,
        &.fui-Input__input-md,
        &.fui-Input__input-lg,
        &.fui-Input__input-xl {
            box-sizing: border-box;
            flex-grow: 1;
            min-width: 0px;
            border-style: none;
            padding: 0 var(--spacingHorizontalXXS);
            color: var(--colorNeutralForeground1);
            background-color: transparent;
            outline-style: none;
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
        }

        &.fui-Input__input-md {
            padding-left: var(--spacingHorizontalSNudge);
            padding-right: var(--spacingHorizontalSNudge);
        }

        &.fui-Input__input-lg {
            padding-left: var(--spacingHorizontalS);
            padding-right: var(--spacingHorizontalS);
        }

        &.fui-Input__input-xl {
            padding-left: var(--spacingHorizontalMNudge);
            padding-right: var(--spacingHorizontalMNudge);
        }
    }

    &-error {
        border-bottom-color: var(--colorPaletteRedBorder2) !important;
        border-left-color: var(--colorPaletteRedBorder2) !important;
        border-right-color: var(--colorPaletteRedBorder2) !important;
        border-top-color: var(--colorPaletteRedBorder2) !important;
    }

    &-success {
        border-bottom-color: var(--colorPaletteGreenForeground1) !important;
        border-left-color: var(--colorPaletteGreenForeground1) !important;
        border-right-color: var(--colorPaletteGreenForeground1) !important;
        border-top-color: var(--colorPaletteGreenForeground1) !important;
    }
}

.fui-Textarea {
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: var(--strokeWidthThick);
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;

    &:not(.disabled) {
        border-bottom-color: var(--colorNeutralStrokeAccessible);
        border-left-color: var(--colorNeutralStroke1);
        border-right-color: var(--colorNeutralStroke1);
        border-top-color: var(--colorNeutralStroke1);
        background-color: var(--colorNeutralBackground1);

        &:focus,
        &:focus-within {
            border-bottom-color: var(--colorCompoundBrandStroke);
            border-left-color: var(--colorNeutralStroke1);
            border-right-color: var(--colorNeutralStroke1);
            border-top-color: var(--colorNeutralStroke1);
            border-bottom-style: solid;
            border-left-style: solid;
            border-right-style: solid;
            border-top-style: solid;
            border-bottom-width: var(--strokeWidthThin);
            border-left-width: var(--strokeWidthThin);
            border-right-width: var(--strokeWidthThin);
            border-top-width: var(--strokeWidthThin);
            outline-color: transparent;
            outline-style: solid;
            outline-width: var(--strokeWidthThick);
        }

        &:hover {
            border-right-color: var(--colorNeutralStroke1Hover);
            border-top-color: var(--colorNeutralStroke1Hover);
            border-bottom-style: solid;
            border-left-style: solid;
            border-right-style: solid;
            border-top-style: solid;
            border-bottom-width: var(--strokeWidthThin);
            border-left-width: var(--strokeWidthThin);
            border-right-width: var(--strokeWidthThin);
            border-top-width: var(--strokeWidthThin);
        }

        &:active {
            border-bottom-color: var(--colorNeutralStrokeAccessiblePressed);
            border-left-color: var(--colorNeutralStroke1Pressed);
            border-right-color: var(--colorNeutralStroke1Pressed);
            border-top-color: var(--colorNeutralStroke1Pressed);
            border-bottom-style: solid;
            border-left-style: solid;
            border-right-style: solid;
            border-top-style: solid;
            border-bottom-width: var(--strokeWidthThin);
            border-left-width: var(--strokeWidthThin);
            border-right-width: var(--strokeWidthThin);
            border-top-width: var(--strokeWidthThin);
        }
    }


    .fui-Textarea__input {
        /*resize: none;*/
        /*max-height: 260px;*/
        background-color: transparent;
        border-bottom-style: none;
        border-left-style: none;
        border-right-style: none;
        border-top-style: none;
        box-sizing: border-box;
        color: var(--colorNeutralForeground1);
        flex-grow: 1;
        font-family: var(--fontFamilyBase);
        font-size: var(--fontSizeBase300);
        font-weight: var(--fontWeightRegular);
        height: 100%;
        line-height: var(--lineHeightBase300);
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        min-height: 52px;
        outline-style: none;
        padding-bottom: var(--spacingVerticalSNudge);
        padding-left: calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));
        padding-right: calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));
        padding-top: var(--spacingVerticalSNudge);
    }
}

.fui-ColorInput.fui-Input__input {
    &[type="color"] {
        &::-webkit-color-swatch-wrapper {
            display: inline-flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 20px;
            height: 20px;
            padding: 0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
            border-radius: var(--borderRadiusCircular);
            border-color: var(--colorTransparentStroke);
            background-color: var(--fui-ColorInput--value);
            color: var(--fui-ColorInput--value);
        }

        &::-moz-color-swatch {
            display: inline-flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 20px;
            height: 20px;
            padding: 0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
            border-radius: var(--borderRadiusCircular);
            border-color: var(--colorTransparentStroke);
            background-color: var(--fui-ColorInput--value);
            color: var(--fui-ColorInput--value);
        }

        &::-webkit-color-swatch {
            display: none;
        }
    }
}

.b-is-autocomplete.b-is-autocomplete-multipleselection {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    cursor: text;
    line-height: var(--lineHeightBase300);
    border-bottom-left-radius: var(--borderRadiusMedium);
    border-bottom-right-radius: var(--borderRadiusMedium);
    border-bottom-style: solid;
    border-bottom-width: var(--strokeWidthThin);
    border-left-style: solid;
    border-left-width: var(--strokeWidthThin);
    border-radius: var(--borderRadiusMedium);
    border-right-style: solid;
    border-right-width: var(--strokeWidthThin);
    border-top-left-radius: var(--borderRadiusMedium);
    border-top-right-radius: var(--borderRadiusMedium);
    border-top-style: solid;
    border-top-width: var(--strokeWidthThin);
    box-sizing: border-box;
    border-bottom-color: var(--colorNeutralStroke1);
    border-left-color: var(--colorNeutralStroke1);
    border-right-color: var(--colorNeutralStroke1);
    border-top-color: var(--colorNeutralStroke1);

    > .fui-Badge {
        margin-top: var(--spacingVerticalSNudge);
        margin-bottom: var(--spacingVerticalSNudge);
        flex-grow: initial;
    }

    > .fui-Input {
        border: none;
        box-shadow: none;
        outline: none;
        background-color: transparent;
        max-width: inherit;
        width: auto;
        flex-grow: 1;
    }
}
